<template>
    <div>
        <el-card>
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-input placeholder="请输入订单号"  class="input-with-select" v-model="queryInfo.orderId" clearable @clear="getDataList" />
                </el-col>
                 <el-col :span="4">
                    <el-input placeholder="请输入手机号" class="input-with-select" v-model="queryInfo.mobile" clearable @clear="getDataList" />
                </el-col>
                 <el-col :span="4">
                    <el-button type="primary" @click="getDataList" size="small">查询</el-button>
                </el-col>
            </el-row>
            <el-table :data="dataList" border stripe>
                <el-table-column label="订单号" prop="orderId"></el-table-column>
                <el-table-column label="订单类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.orderType=='M'">电影</span>
                    <span v-if="scope.row.orderType=='MC'">会员充值</span>
                    <span v-if="scope.row.orderType=='BMH'">爆米花</span>
                  </template>
                </el-table-column>
                <el-table-column label="手机号" prop="mobile"></el-table-column>
                <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
                <el-table-column label="需退卡券" prop="couponAmount"></el-table-column>
                <el-table-column label="需退现金" prop="cashAmount"></el-table-column>
                <el-table-column label="需退账户余额" prop="accountAmount"></el-table-column>
                <el-table-column label="申请人" prop="userName"></el-table-column>
                <el-table-column label="原因" prop="reason"></el-table-column>
                <el-table-column label="申请时间" prop="addTime"></el-table-column>
                <el-table-column label="退卡/券">
                    <template slot-scope="scope">
                        <el-button type="warning" @click="refundCoupon(scope.row.id)" size="small" v-if="scope.row.refundCouponStatus=='W'">退卡/券</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="退现金">
                    <template slot-scope="scope">
                        <el-button type="info" @click="refundCash(scope.row.id)" size="small" v-if="scope.row.refundCashStatus=='W'">退现金</el-button>
                    </template>
                </el-table-column>
              <el-table-column label="退账户余额">
                <template slot-scope="scope">
                  <el-button type="info" @click="refundAccount(scope.row.id)" size="small" v-if="scope.row.refundAccountStatus=='W'">退账户余额</el-button>
                </template>
              </el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="deleteRefundOrder(scope.row.id)" size="small" v-if="scope.row.status=='N'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
import Api from "@/api/Api.js";
export default {
    data() {
        return {
            queryInfo: {
                orderId: "",
                mobile: "",
                pageNo: 1, // 页码
                pageSize: 10, // 页大小
            },
            dataList: [],
            total: 0
        };
    },
    watch: {
    },
    created() {
        this.getDataList();
    },
    methods: {
        getDataList() {
            Api.refundOrderList(this.queryInfo).then((res) => {
                if (res.success) {
                    this.dataList = res.data.records;
                    this.total = res.data.total;
                } else {
                    return this.$message.error("获取数据失败");
                }
            });
        },
        refundCash(id) {
            Api.refundCash({'id':id}).then((res) => {
                if (res.success) {
                    this.getDataList()
                    return this.$message.success("操作成功");
                } else {
                    return this.$message.error("操作失败：" + res.msg);
                }
            });
        },
        refundCoupon(id) {
            Api.refundCoupon({'id':id}).then((res) => {
                if (res.success) {
                    this.getDataList()
                    return this.$message.success("操作成功");
                } else {
                    return this.$message.error("操作失败：" + res.msg);
                }
            });
        },
        refundAccount(id) {
          Api.refundAccount({'id':id}).then((res) => {
            if (res.success) {
              this.getDataList()
              return this.$message.success("操作成功");
            } else {
              return this.$message.error("操作失败：" + res.msg);
            }
          });
        },
         deleteRefundOrder(id) {
            this.$confirm('确认删除吗？')
            .then(_ => {
                Api.deleteRefundOrder({'id':id}).then((res) => {
                    if (res.success) {
                        this.getDataList()
                        return this.$message.success("操作成功");
                    } else {
                        return this.$message.error("操作失败：" + res.msg);
                    }
                });
            }).catch(_ => {});
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageNo = 1;
            this.queryInfo.pageSize = pageSize;
            this.getDataList();
        },
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo;
            this.getDataList();
        }
    }
};
</script>

<style>
.form_ipt {
    width: 450px;
}
</style>
